import React, { useState, useContext } from "react";
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  Text,
  Button,
  Platform,
  TextInput,
} from "react-native";

import { Context as AuthContext } from "../context/AuthContext";

import { useDispatch } from "react-redux";
import { register } from "../store/actions";

import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Feather from "react-native-vector-icons/Feather";
import * as Animatable from "react-native-animatable";

const SignUpScreen = ({ navigation }) => {
  const { state, signup } = useContext(AuthContext);

  const dispatch = useDispatch();

  const [data, setData] = useState({
    email: "",
    password: "",
    confirm_password: "",
    check_textInputChange: false,
    secureTextEntry: true,
    confirmSecureTextEntry: true,
  });
  const textInputChange = (val) => {
    if (val.length != 0) {
      setData({ ...data, email: val, check_textInputChange: true });
    } else {
      setData({ ...data, email: val, check_textInputChange: false });
    }
  };
  const handlePasswordChange = (val) => {
    setData({ ...data, password: val });
  };
  const handleConfirmPasswordChange = (val) => {
    setData({ ...data, confirm_password: val });
  };

  const updateSecureTextEntry = (val) => {
    setData({ ...data, secureTextEntry: !data.secureTextEntry });
  };
  const updateConfirmSecureTextEntry = (val) => {
    setData({ ...data, confirmSecureTextEntry: !data.confirmSecureTextEntry });
  };

  // const errorMessage = useSelector((state) => state.authR.authToken);
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.text_header}>Register Now!</Text>
      </View>
      <Animatable.View style={styles.footer} animation="fadeInUpBig">
        <Text style={styles.text_footer}>Email</Text>
        <View style={styles.action}>
          <FontAwesome name="user-o" color="#05375a" size={20} />
          <TextInput
            placeholder="你的邮箱"
            style={styles.textInput}
            autoCapitalize="none"
            onChangeText={(val) => textInputChange(val)}
          />
          {data.check_textInputChange ? (
            <Animatable.View animation="bounceIn">
              <Feather name="check-circle" color="green" size={20} />
            </Animatable.View>
          ) : null}
        </View>
        <Text style={[styles.text_footer, { marginTop: 35 }]}>Password</Text>
        <View style={styles.action}>
          <FontAwesome name="lock" color="#05375a" size={20} />
          <TextInput
            placeholder="你的密码"
            style={styles.textInput}
            secureTextEntry={data.secureTextEntry ? true : false}
            autoCapitalize="none"
            onChangeText={(val) => handlePasswordChange(val)}
          />
          <TouchableOpacity onPress={updateSecureTextEntry}>
            {data.secureTextEntry ? (
              <Feather name="eye-off" color="gray" size={20} />
            ) : (
              <Feather name="eye" color="gray" size={20} />
            )}
          </TouchableOpacity>
        </View>
        <Text style={[styles.text_footer, { marginTop: 35 }]}>
          ConfirmPassword
        </Text>
        <View style={styles.action}>
          <FontAwesome name="lock" color="#05375a" size={20} />
          <TextInput
            placeholder="确认你的密码"
            style={styles.textInput}
            secureTextEntry={data.secureTextEntry ? true : false}
            autoCapitalize="none"
            onChangeText={(val) => handleConfirmPasswordChange(val)}
          />
          <TouchableOpacity onPress={updateConfirmSecureTextEntry}>
            {data.secureTextEntry ? (
              <Feather name="eye-off" color="gray" size={20} />
            ) : (
              <Feather name="eye" color="gray" size={20} />
            )}
          </TouchableOpacity>
        </View>
        {state.errorMessage ? (
          <Text style={styles.errorMsg}>{state.errorMessage}</Text>
        ) : null}
        <View style={styles.button}>
          {/* navigation.navigate('SignUpScreen') */}
          <TouchableOpacity
            style={styles.signUp}
            onPress={() => dispatch(register(data.email, data.password))}
          >
            {/* signup({ email: data.email, password: data.password }) */}
            <Text style={styles.textSignUp}>注 册</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.signIn}
            onPress={() => navigation.goBack()}
          >
            <Text style={styles.textSignIn}>登 录</Text>
          </TouchableOpacity>
        </View>
      </Animatable.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#009387",
  },
  header: {
    flex: 1,
    justifyContent: "flex-end",
    paddingHorizontal: 20,
    paddingBottom: 50,
  },
  footer: {
    flex: 3,
    backgroundColor: "#fff",
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingHorizontal: 20,
    paddingVertical: 30,
  },
  text_header: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 30,
  },
  text_footer: {
    color: "#05375a",
    fontSize: 18,
  },
  action: {
    flexDirection: "row",
    marginTop: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#f2f2f2",
    paddingBottom: 5,
  },
  actionError: {
    flexDirection: "row",
    marginTop: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#FF0000",
    paddingBottom: 5,
  },
  textInput: {
    flex: 1,
    marginTop: Platform.OS === "ios" ? 0 : -12,
    paddingLeft: 10,
    color: "#05375a",
  },
  errorMsg: {
    marginTop: 10,
    color: "#FF0000",
    fontSize: 16,
  },
  button: {
    alignItems: "center",
    marginTop: 50,
  },
  signUp: {
    backgroundColor: "#009387",
    width: "100%",
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
  },
  signIn: {
    borderColor: "#009387",
    borderWidth: 1,
    marginTop: 15,
    width: "100%",
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
  },
  textSignUp: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#fff",
  },
  textSignIn: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#05375a",
  },
});

export default SignUpScreen;
